<template>
    <div ref="lotContTab" class="tx-c tx-s-14 mar-t-5">
        <div class="flex-box bor-b bg-c-g lineh">
            <div class="flex-f1" v-for="(value, key) in tab" :key="key" :class="{
                'circle-R tx-c-wh' : index == key
            }" @click="togTab(key, value)">{{ value }}</div>
        </div>
        <div class="scroll-lot">
            <lot-options
                :title="selTab"
                :playType="playType"
                :content="content"
                :odds="odds"
                :circle="circle"
                ></lot-options>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import LotOptions from "./lotOptions"
import { isDefine } from '../../common/js/common'
import { numCont, ezzhCont, szzhCont, zx3Cont, zx6Cont } from '../../common/js/data'
export default {
    data () {
        return {
            index : 'q3', // tab切换标识
            selTab : ['q3', this.tab['q3']], // 选中tab信息
            playType : 'q3_' + this.title[0], // 拼接选中玩法
            contentObj : {ezzh: ezzhCont(), szzh: szzhCont(), zx3: zx3Cont(), zx6: zx6Cont()},
            content : '',
            odds : '',
            circle : false // 数字显示圆圈边框
        }
    },
    created () {
        const type = this.title[0]
        if(isDefine(this.contentObj[type])){
            this.content = this.contentObj[type]
        }else{
            this.circle = true
            this.content = numCont(0, 9, '') // 一字组合、跨度
        }
        if(type == 'zx3' || type == 'zx6'){ // 组选三、组选六
            this.odds = this.$store.state.lotOdds
        }else{ // 其他
            this.odds = this.$store.state.lotOdds[type]
        }
    },
    props: {
        title : Array,
        tab : Object
    },
    methods : {
        togTab (key, value) {
            this.index = key
            this.selTab = [key, this.tab[key]]
            this.playType = key + '_' + this.title[0]
            // 重置下注数据
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        }
    },
    components : {
        LotOptions
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .lineh
        line-height : 2rem
        margin : 0 2%
    .scroll-lot
        position : fixed
        top : 10.875rem
        bottom : 3.25rem
        width : 96%
        margin : 0 2%
        overflow: auto
    .scroll-lot::-webkit-scrollbar
        display : none
    .bor-b
        border-bottom: 1px solid #CCC
</style>